<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>劳动教育主题网站</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E63946', // 柔和红色
                        secondary: '#1D3557', // 深蓝色
                        light: '#F1FAEE', // 浅色背景
                        accent: '#A8DADC', // 浅蓝色
                        neutral: '#457B9D', // 中性色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .nav-link {
                @apply block py-2 px-4 rounded-md transition-all duration-300 hover:bg-primary/10 hover:text-primary;
            }
            .nav-link.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .section-card {
                @apply bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl;
            }
            /* 新增社交图标组悬停效果 */
            .social-icon-group:hover .wechat-qrcode,
            .social-icon-group:hover .weibo-qrcode,
            .wechat-qrcode:hover,
            .weibo-qrcode:hover {
                @apply opacity-100 visible pointer-events-auto;
            }
        }
    </style>
</head>

<body class="bg-light min-h-screen flex flex-col">
    <!-- 头部区域 -->
    <header class="h-[8rem] bg-gradient-to-r from-primary/90 to-secondary/90 text-white shadow-md">
        <div class="container mx-auto px-4 h-full flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <img src="./img/image.png" alt="" class="w-[33vw] mx-4 object-contain">
                <h1 class="text-2xl md:text-3xl font-bold tracking-tight">劳动教育<span class="text-accent">实践平台</span></h1>
            </div>
            <nav class="hidden md:flex space-x-8 items-center">
                <!-- 修改导航链接 -->
                <a href="layout.html"
                    class="text-lg md:text-xl font-bold text-white hover:text-accent transition-colors duration-300">首页</a>
                <a href="../活动报道/近期活动.html"
                    class="text-lg md:text-xl font-bold text-white hover:text-accent transition-colors duration-300">活动报道</a>
                <a href="../专业劳动案例/优秀案例.html"
                    class="text-lg md:text-xl font-bold text-white hover:text-accent transition-colors duration-300">专业劳动案例</a>
                <a href="../学生心得/学生心得.html"
                    class="text-lg md:text-xl font-bold text-white hover:text-accent transition-colors duration-300">学生心得</a>
            </nav>

            <button class="md:hidden text-white text-2xl">
                <i class="fa-solid fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <article class="flex-grow container mx-auto px-4 py-6">
        <!-- 中间内容区 -->
        <section class="max-w-10xl mx-auto space-y-6">
            <!-- 轮播图 -->
            <div class="section-card h-96 overflow-hidden relative rounded-xl">
                <!-- 轮播图容器 -->
                <div class="slider-container h-full relative">
                    <!-- 轮播项1 - 修改data-href指向优秀案例页面 -->
                    <div class="slider-item absolute inset-0 opacity-100 transition-opacity duration-1000 cursor-pointer"
                        data-href="../专业劳动案例/优秀案例.html">
                        <div class="absolute inset-0 bg-gradient-to-r from-secondary/70 to-primary/70 z-10"></div>
                        <img src="../活动报道/img/劳动4.jpg" alt="劳动教育宣传图"
                            class="w-full h-full object-cover">
                        <div class="absolute inset-0 z-20 flex flex-col justify-center px-8 text-white">
                            <h2 class="text-3xl font-bold mb-2">培养劳动精神</h2>
                            <p class="text-lg max-w-2xl">唱响新时代劳动者奋斗之歌</p>
                        </div>
                    </div>

                    <!-- 轮播项2 - 修改data-href指向优秀案例页面 -->
                    <div class="slider-item absolute inset-0 opacity-0 transition-opacity duration-1000 cursor-pointer"
                        data-href="../专业劳动案例/优秀案例.html">
                        <div class="absolute inset-0 bg-gradient-to-r from-secondary/70 to-primary/70 z-10"></div>
                        <img src="../活动报道/img/劳动5.png" alt="劳动课程" class="w-full h-full object-cover">
                        <div class="absolute inset-0 z-20 flex flex-col justify-center px-8 text-white">
                            <h2 class="text-3xl font-bold mb-2">劳动最光荣</h2>
                            <p class="text-lg max-w-2xl">弘扬劳动精神 激发奋进力量</p>
                        </div>
                    </div>

                    <!-- 轮播控制按钮 -->
                    <button
                        class="slider-prev absolute left-4 top-1/2 -translate-y-1/2 z-30 bg-white/30 hover:bg-white/50 text-white p-2 rounded-full transition-colors">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                    <button
                        class="slider-next absolute right-4 top-1/2 -translate-y-1/2 z-30 bg-white/30 hover:bg-white/50 text-white p-2 rounded-full transition-colors">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>

                    <!-- 指示器 -->
                    <div class="slider-indicators absolute bottom-4 left-1/2 -translate-x-1/2 z-30 flex space-x-2">
                        <button class="slider-dot w-3 h-3 rounded-full bg-white opacity-100"></button>
                        <button class="slider-dot w-3 h-3 rounded-full bg-white opacity-50"></button>
                    </div>
                </div>
            </div>

            <!-- 内容卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 活动报道卡片 -->
                <div class="section-card hover:-translate-y-1 relative group cursor-pointer"
                    onclick="window.location.href='../活动报道/近期活动.html'">
                    <div class="h-60 overflow-hidden rounded-lg mb-4">
                        <img src="../活动报道/img/劳动1.png" alt="劳动课程"
                            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold text-secondary mb-2">活动报道</h3>
                    <p class="text-gray-600 mb-4">对学校有关的劳动活动进行报道，涵盖日常生活劳动、生产劳动和社会服务性劳动等多个方面。</p>
                    <a href="#labor-course" class="inline-flex items-center text-primary font-medium hover:underline">
                        查看报道 <i class="fa-solid fa-arrow-right ml-2"></i>
                    </a>
                    <!-- 添加覆盖层 -->
                    <div class="absolute inset-0 z-10 bg-transparent cursor-pointer"></div>
                </div>
                <!-- 学生心得卡片 -->
                <div class="section-card hover:-translate-y-1 relative group cursor-pointer"
                    onclick="window.location.href='../学生心得/学生心得.html'">
                    <div class="h-60 overflow-hidden rounded-lg mb-4">
                        <img src="../活动报道/img/心得交流.png" alt="实践活动"
                            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold text-secondary mb-2">学生心得</h3>
                    <p class="text-gray-600 mb-4">通过丰富多样的实践活动，让学生在劳动中体验快乐，培养责任感和团队合作精神。</p>
                    <a href="#practice-activities"
                        class="inline-flex items-center text-primary font-medium hover:underline">
                        查看心得 <i class="fa-solid fa-arrow-right ml-2"></i>
                    </a>
                    <!-- 添加覆盖层 -->
                    <div class="absolute inset-0 z-10 bg-transparent cursor-pointer"></div>
                </div>
            </div>

            <!-- 最新动态 -->
            <div class="section-card">
                <h3 class="text-xl font-bold text-secondary mb-4 flex items-center">
                    <i class="fa-solid fa-bullhorn mr-2 text-primary"></i>最新动态
                </h3>
                <div class="space-y-4">
                    <div class="flex items-start space-x-4 pb-4 border-b border-gray-100">
                        <div class="bg-primary/10 p-3 rounded-full text-primary">
                            <i class="fa-solid fa-calendar-day"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800">劳动教育主题班会</h4>
                            <p class="text-sm text-gray-600">下周一班会时间将开展"劳动最光荣"主题班会活动，全体学生参加。</p>
                            <span class="text-xs text-gray-500">2025-05-10</span>
                        </div>
                    </div>
                    <div class="flex items-start space-x-4 pb-4 border-b border-gray-100">
                        <div class="bg-primary/10 p-3 rounded-full text-primary">
                            <i class="fa-solid fa-graduation-cap"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800">劳动教育主题团课</h4>
                            <p class="text-sm text-gray-600">食品与药品学院将组织开展“向劳动者致敬”主题团课</p>
                            <span class="text-xs text-gray-500">2025-04-15</span>
                        </div>
                    </div>
                    <div class="flex items-start space-x-4">
                        <div class="bg-primary/10 p-3 rounded-full text-primary">
                            <i class="fa-solid fa-book"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800">致敬洛职劳动者</h4>
                            <p class="text-sm text-gray-600">五一国际劳动节将至，致敬劳动者</p>
                            <span class="text-xs text-gray-500">2025-04-30</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>

    <!-- 页脚区域 -->
    <!-- <footer class="h-[18rem] bg-[#B22222] flex items-center justify-center relative overflow-hidden"> -->
    <footer class="bg-gradient-to-r from-primary/90 to-secondary/90 pt-6 mt-auto h-64">
        <!-- 内容容器 -->
        <div class="container mx-auto px-4 text-center translate-y-5">
            <!-- 居中图片 -->
            <img src="./img/image.png" alt="Logo" class="w-96 mx-auto mb-6 object-contain">

            <!-- 社交链接和版权信息整体容器 - 增加mt-8使整体下移 -->
            <div class="mt-8 relative z-10">
                <!-- 社交链接 - 使用flex justify-center确保居中 -->
                <div class="flex justify-center space-x-8 mb-6">
                    <!-- 微信图标 -->
                    <div class="social-icon-group relative">
                        <a href="#"
                            class="text-white hover:text-accent transition-colors duration-300 flex flex-col items-center">
                            <i class="fa-brands fa-weixin text-2xl"></i>
                            <span class="text-sm mt-1">微信公众号</span>
                        </a>
                        <!-- 微信二维码图片 -->
                        <div
                            class="wechat-qrcode absolute bottom-full left-1/2 -translate-x-1/2 mb-4 bg-white p-3 rounded-lg shadow-xl opacity-0 invisible transition-all duration-300 pointer-events-none w-32">
                            <img src="./img/wechat.png" alt="微信公众号" class="w-full h-auto object-cover">
                            <div class="text-sm text-center text-gray-700 mt-2">扫码关注公众号</div>
                        </div>
                    </div>

                    <!-- 微博图标 -->
                    <div class="social-icon-group relative">
                        <a href="#"
                            class="text-white hover:text-accent transition-colors duration-300 flex flex-col items-center">
                            <i class="fa-brands fa-weibo text-2xl"></i>
                            <span class="text-sm mt-1">官方微博</span>
                        </a>
                        <!-- 微博二维码图片 -->
                        <div
                            class="weibo-qrcode absolute bottom-full left-1/2 -translate-x-1/2 mb-4 bg-white p-3 rounded-lg shadow-xl opacity-0 invisible transition-all duration-300 pointer-events-none w-32">
                            <img src="./img/weibo.png" alt="官方微博" class="w-full h-auto object-cover">
                            <div class="text-sm text-center text-gray-700 mt-2">关注官方微博</div>
                        </div>
                    </div>
                </div>

                <!-- 版权信息 -->
                <div class="text-sm text-white">
                    &copy; 2025 劳动教育实践平台 - 版权所有
                </div>
            </div>
        </div>
    </footer>

    <script src="./layout.js"></script>
</body>

</html>